<template>
  <div class="SysMenu">
    <div class="head">
      <el-form
        :inline="true"
        :model="filters"
        :size="size"
      >
        <el-form-item>
          <el-input
            v-model="filters.name"
            placeholder="名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="initMenuTree(null)"
          >查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="showDiaologForAdd"
          >新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-table
        :data="menuTree"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        :expand-row-keys="['1']"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="180"
        >
        </el-table-column>

        <el-table-column
          prop="name"
          label="菜单名称"
          width="180"
        >
        </el-table-column>

        <el-table-column
          prop="path"
          label="Path"
          width="180"
        >
        </el-table-column>

        <el-table-column
          prop="component"
          label="组件名"
          width="180"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="iconCls"
          label="图标"
          width="180"
          align="center"
        >
          <template v-slot="scope">
            <el-button
              type="text"
              :icon="scope.row.iconCls"
            ></el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="上级菜单"
          width="180"
          align="center"
        >
          <template v-slot="scope">
            {{scope.row.parentName}}
          </template>
        </el-table-column>

        <el-table-column
          prop="url"
          label="URL"
          width="180"
        >
        </el-table-column>

        <el-table-column
          label="操作"
          width="180"
        >
          <template v-slot="scope">
            <el-button
              type="primary"
              size="mini"
              @click="showDiaologForUpdate(scope.row)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="dialogs">
      <el-dialog
        :title="!menu.id ? '新增' : '修改'"
        width="40%"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
      >
        <el-form
          :model="menu"
          :rules="dataRule"
          ref="menu"
          @keyup.enter.native="submitDialog()"
          label-width="80px"
          :size="size"
          style="text-align:left;width:70%;margin: auto;"
        >
          <el-form-item
            label="菜单名称"
            prop="name"
          >
            <el-input
              v-model="menu.name"
              placeholder="请输入菜单名称"
            ></el-input>

          </el-form-item>
          <el-form-item
            label="上级菜单"
            prop="parentId"
          >
            <el-select
              v-model="menu.parentId"
              filterable
              :placeholder="menu.name==null? `${menu.name}`:'请选择,输入可搜索'"
            >
              <el-option
                v-for="item in menus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="URL"
            prop="url"
          >
            <el-input
              v-model="menu.url"
              placeholder="URL"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="Path"
            prop="path"
          >
            <el-input
              v-model="menu.path"
              placeholder="请输入path"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="组件名"
            prop="companent"
          >
            <el-input
              v-model="menu.component"
              placeholder="请输入组件名"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="菜单图标"
            prop="iconCls"
          >

            <el-select
              v-model="menu.iconCls"
              placeholder="请选择"
              style="margin-right:50px"
            >
              <el-option
                v-for="(icon) in icons"
                :key="icon"
                :label="icon"
                :value="icon"
              >

                <span style="float: left"> <i :class="icon"></i></span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ icon }}</span>
              </el-option>
            </el-select>
            图标样式:
            <el-button
              type="text"
              :icon="menu.iconCls? `${menu.iconCls}`:'el-icon-plus'"
              size="normal"
              style="margin-left:20px"
            ></el-button>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            :size="size"
            @click="dialogVisible = false"
          >取消</el-button>
          <el-button
            :size="size"
            type="primary"
            @click="submitDialog()"
          >确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script>

export default {

  data() {
    return {
      size: 'small',
      loading: false,
      filters: {
        name: ''
      },
      menuTree: [],
      menus: [],
      dialogVisible: false,
      menu: {
        id: null,
        name: '',
        parentId: null,
        parentName: '',
        url: '',
        iconCls: '',
        iconList: []
      },
      dataRule: {
        name: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '上级菜单不能为空', trigger: 'change' }
        ]
      },
      oldParentId: null,
      icons: ['el-icon-user', 'el-icon-menu', 'el-icon-s-data', 'el-icon-suitcase', 'el-icon-coin']

    }
  },
  methods: {
    // 获取数据
    initMenuTree: function () {
      this.loading = true
      this.getRequest(`/system/cfg/menuTree`).then(resp => {
        this.menuTree = resp

        fillMenu(this.menuTree)

        function fillMenu(menuArray) {

          menuArray.forEach(item => {
            if (item.isParent) {
              item.children.forEach(item2 => {
                item2.parentName = item.name
              })
            }

            if (item.isParent) {
              fillMenu(item.children)
            }
          })
        }

        this.loading = false
      })
    },

    // 显示新增界面
    showDiaologForAdd: function () {
      this.getAllMemus()
      this.dialogVisible = true
      this.menu = {
        id: null,
        name: '',
        parentId: null,
        parentName: '',
        url: '',
        iconCls: '',
      }
    },
    // 显示编辑界面
    showDiaologForUpdate: function (row) {
      this.oldParentId = row.parentId
      this.getAllMemus()
      this.dialogVisible = true
      Object.assign(this.menu, row);
    },
    // 删除
    handleDelete(row) {
      if (row.isParent) {
        this.$message.error('该菜单存在子菜单,无法删除')
        return
      }
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {

        this.deleteRequest(`/system/cfg/menu?id=${row.id}&parentId=${row.parentId}`).then(resp => {
          this.initMenuTree()
        })
      })
    },
    // 表单提交
    submitDialog() {
      this.$refs['menu'].validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true
            let params = Object.assign({}, this.menu)
            if (this.menu.id) {
              params.oldParentId = this.oldParentId
              this.putRequest('/system/cfg/menu', params).then(resp => {
                if (resp) {
                  this.$refs['menu'].resetFields()
                  this.dialogVisible = false
                  this.initMenuTree()
                }
                this.editLoading = false
              })
            } else {
              this.postRequest('/system/cfg/menu', params).then(resp => {
                if (resp) {
                  this.$refs['menu'].resetFields()
                  this.dialogVisible = false
                  this.initMenuTree()
                }
                this.editLoading = false
              })
            }

          })
        }
      })
    },


    //获取所有菜单
    getAllMemus() {

      let menuArray = []

      this.menus = fillMenus(this.menuTree, menuArray)

      function fillMenus(menuTree, menuArray) {
        menuTree.forEach(item => {
          menuArray.push(item)
          if (item.isParent) {
            fillMenus(item.children, menuArray)
          }
        })
        return menuArray
      }
    },

  },
  mounted() {
    this.initMenuTree()
  }
}
  </script>
  
  <style scoped>
</style>